@import "column.less";


@supports (display: flex) {
  .row {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    [class^=col-]{
      float: initial;
    }
  }
}

.flex {
  &,
  &-col,
  &-row,
  &-center,
  &-col-between,
  &-row-between,
  &-row-reverse,
  &-col-reverse {
    display: flex;
  }
  &-row {
    &,
    &-between {
      flex-direction: row;
    }
    &-between {
      justify-content: space-between;
    }
  }
  &-col {
    flex-direction: column;
  }
  &-col-between {
    flex-direction: column;
  }
  &-row-reverse {
    flex-direction: row-reverse;
  }
  &-col-reverse {
    flex-direction: column-reverse;
  }
  &-row-between {
    flex-direction: row;
  }


  &-align-start {
    align-items: start;
  }

  &-align-center {
    align-items: center;
  }

  &-align-end {
    align-items: end;
  }

  &-justify-center {
    justify-content: center;
  }

  &-center {
    align-items: center;
    justify-content: center;
  }
}